/* Demo Styles */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.swiper-container {
  max-width: 900px;
  width: 95%;
  height: 120px;
  color: #fff;
  text-align: center;
}
.red-slide {
  background: #ca4040;
}
.blue-slide {
  background: #4390ee;
}
.orange-slide {
  background: #ff8604;
}
.green-slide {
  background: #49a430;
}
.pink-slide {
  background: #973e76;
}
.swiper-slide .title {
  font-style: italic;
  font-size: 42px;
  margin-top: 80px;
  margin-bottom: 0;
  line-height: 45px;
}
.swiper-slide img{
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}
.swiper-slide{
  position: relative;
}
.pagination {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 10px;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #222;
  margin-right: 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;
}
.swiper-visible-switch {
  background: #aaa;
}
.swiper-active-switch {
  background: #fff;
}
.device {
  max-width: 980px;
  padding: 30px 0px;
  border-radius: 20px;
  border: 3px solid white;
  margin: 0px auto;
  position: relative;
  box-shadow: 0px 0px 5px #000;
  top: 70px;
  width: 97%;
}
.arrow-left {
  background: url(../img/left.png) no-repeat;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -15px;
width: 20px;
  z-index: 100;
height: 40px;
}
.arrow-right {
  z-index: 100;
  background: url(../img/right.png) no-repeat;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 20px;
  height: 40px;
}

.tabs {
  border-radius: 20px;
  margin: 0px auto;
  position: relative;
  top: 74px;
  z-index: 10;
  display: inline-block;
  left: 50%;
  transform: translate(-50%,0);
  -ms-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
}
.tabs-inner{

}
.tabs a {
  display: block;
  float: left;
  width: 180px;
  color: #333;
  text-align: center;
  border-radius: 5px 5px 0 0;
  border: 1px solid #ccc;
  background: #fff;
  line-height: 40px;
  font-size: 25px;
  font-style: italic;
  text-decoration: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ddd)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #ffffff, #ddd); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #ffffff, #ddd); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #ffffff, #ddd); /* IE10 */
  background-image:      -o-linear-gradient(top, #ffffff, #ddd); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #ffffff, #ddd);
}
.tabs a.active {
  color: #fff;
  background: #333;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #333, #000); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #333, #000); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #333, #000); /* IE10 */
  background-image:      -o-linear-gradient(top, #333, #000); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #333, #000);
  border-bottom: 1px solid #000;
}

.indicator {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 15px 25px 15px;
  border-color: transparent transparent grey transparent;
  line-height: 0px;
  _border-color: #000000 #000000 grey #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
  
  position: absolute;
  bottom: -3px;
  left: 130px;
}

.explain {
  max-width: 900px;
  width: 90%;
  padding: 30px 0px;
  border-radius: 20px;
  border: 3px solid white;
  margin: 5px auto;
  position: relative;
  top: 70px;
}
.explain .content .header {
  font-size: 17px;
  font-weight: bolder;
}
@media (max-width: 769px) {
    .indicator{
      border-width:0 10px 15px 10px;
      left: 125px;
    }
}
@media (max-width: 730px) {
    .tabs a{
        width: 130px;
        font-size: 23px;
    }
    .device{
      padding: 20px 0px;
    }
    .arrow-right,.arrow-left{
      width: 15px;
      background-size: 100% auto;
    }
}
@media (max-width: 569px) {
  .indicator{
    left: 90px;
  }
}
@media (max-width: 530px) {
    .tabs a{
        width: 76px;
        font-size: 14px;
    }
    .explain .title h1{
      font-size: 1.5em;
    }
}
@media (max-width: 321px) {
  .indicator{
    left: 47px;
  }
  .arrow-right{
    right: 5px;
  }
  .arrow-left{
    left: 5px;
  }
  .device{
    border-radius: 6px;
  }
}
